layui.use(['table', 'jquery', 'laydate'], function () {
    var table = layui.table,
        $ = layui.jquery,
        laydate = layui.laydate;

    //显示日期
    showTime('#startDate');
    showTime('#endDate');

    //默认加载时执行
    findAll();
    findAllRole();

    function findAll() {

        let studentId = $('#studentId').val();
        let username = $('#username').val();
        let gender = $("#sex option:selected").val();
        let userRole = $("#userRole option:selected").val();
        let startDate = $('#startDate').val();
        let endDate = $('#endDate').val();
        let params = {
            studentId: studentId,
            username: username,
            gender: gender,
            userRole:userRole
        };
        if (startDate !== undefined && startDate != null && startDate !== '') {
            params['startDate'] = startDate
        }
        if (endDate !== undefined && endDate != null && endDate !== '') {
            params['endDate'] = endDate
        }
        //table样式
        table.render({
            elem: '#test'
            , url: URL + "/user/findAll"//http://localhost:8080/user/findAll?pageNum=1&pageSize=5
            , where: params
            //如果无需传递额外参数，可不加该参数
            , method: 'get' //如果无需自定义HTTP类型，可不加该参数
            , request: {
                pageName: 'pageNum' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            } //如果无需自定义请求参数，可不加该参数
            //response: {} //如果无需自定义数据响应名称，可不加该参数
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , height: 420
            , toolbar: '#toolbar' //开启头部工具栏，并为其绑定左侧模板
            // ,toolbar: 'default' //开启头部工具栏，并为其绑定左侧模板
            // ,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
            //     title: '提示'
            //     ,layEvent: 'LAYTABLE_TIPS'
            //     ,icon: 'layui-icon-tips'
            // }]
            , skin: 'line' //表格风格
            , even: true  //双数
            , page: true //是否显示分页
            , limits: [5, 10, 20, 30, 50] //每页显示多少条
            , limit: 10 //每页默认显示的数量
            , title: '用户数据表'
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left'}
                , {field: 'studentId', width: 80, title: '学号', sort: true}
                , {field: 'username', width: 80, title: '用户名'}
                , {
                    field: 'userRole', width: 130, title: '用户角色', templet: function (e) {
                        let result = e.userRole;
                        return showUserRole(result);
                    }
                }
                , {
                    field: 'avatar', width: 120, title: '头像', templet: function (e) {
                        //判断图片是否为空
                        e.avatar === null || e.avatar === undefined ? e.avatar = '/upload/img_null.png' : e.avatar;
                        return '<img src="' + e.avatar + '" width="80px" height="30px">'
                    }
                }
                , {field: 'team', width: 160, title: '小组',templet:e=>{
                        if (e.team!=null && e.team !==undefined && e.team!==''){
                            return e.team;
                        } else {
                            return '暂未分配';
                        }
                    }}
                , {
                    field: 'dataEnable', width: 120, title: '状态', templet: function (e) {
                        return showDataEnable(e);
                    }
                }
                , {field: 'genderStr', width: 80, title: '性别', sort: true}
                , {field: 'birthday', title: '生日', width: '20%', minWidth: 100}
                , {field: 'phone', width: 80, title: '电话'}
                , {field: 'hometown', width: 80, title: '籍贯'}
                , {field: 'degreeStr', title: '学历'} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                , {field: 'introduce', title: '自我介绍', sort: true}
                , {field: 'sequence', title: '排序号', sort: true}
                , {fixed: 'right', width: 235, align: 'center', toolbar: '#barDemo'}
            ]]

        });
    }

    //监听头工具栏事件
    table.on('toolbar(test)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id)
            , data = checkStatus.data; //获取选中的数据
        switch (obj.event) {
            case 'add':
                addUser();
                break;
            case 'update':
                if (data.length === 0) {
                    layer.msg('请选择一行');
                } else if (data.length > 1) {
                    layer.msg('只能同时编辑一个');
                } else {
                    // layer.alert('编辑 [id]：' + checkStatus.data[0].id);
                    updateUser(checkStatus.data[0].id);
                }
                break;
            case 'enable':
                if (data.length === 0) {
                    layer.msg('请选择一行');
                } else if (data.length > 1) {
                    layer.msg('只能同时编辑一个');
                } else {
                    dataEnable('yes', checkStatus.data[0].id);
                }
                break;
            case 'disabled':
                if (data.length === 0) {
                    layer.msg('请选择一行');
                } else if (data.length > 1) {
                    layer.msg('只能同时编辑一个');
                } else {
                    dataEnable('no', checkStatus.data[0].id);
                }
                break;
            case 'batchDel':
                if (data.length === 0) {
                    layer.msg('请至少选择一行');
                } else {
                    let ids = [];
                    for (let i = 0; i < data.length; i++) {
                        //获取每一行选中的Id
                        ids += checkStatus.data[i].id + ',';
                    }
                    //去掉最后一个逗号
                    ids = ids.substring(0, ids.lastIndexOf(','));
                    // layer.alert('删除 [id]：' + ids.toString());
                    layer.confirm('真的删除行么', function (index) {
                        layer.close(index);
                        //向服务端发送删除指令
                        batchDel(ids.toString())
                    });
                }
                break;
        }
    });

    //监听行工具事件
    table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        var data = obj.data //获得当前行数据
            , layEvent = obj.event; //获得 lay-event 对应的值
        if (layEvent === 'detail') {
            distributionRole(data.id);
        } else if (layEvent === 'del') {
            layer.confirm('真的删除行么', function (index) {
                // obj.del(); //删除对应行（tr）的DOM结构
                layer.close(index);
                //向服务端发送删除指令
                deleteUser(data.id);
            });
        } else if (layEvent === 'edit') {
            // layer.msg('编辑操作');
            updateUser(data.id);
        }
    });


    /**
     * 添加
     */
    function addUser() {
        commonLayerOpen('新增用户', 'userAdd.html');
    }

    /**
     * 删除
     * @param id
     */
    function deleteUser(id) {

        let result = commonAjax('/user/delete', {id: id}, 'get');
        if (result.count === 1) {
            layerMsgDeleteSuccess();
            findAll();
        } else {
            layerMsgDeleteFail();
        }
    }

    /**
     * 批量删除
     */
    function batchDel(ids) {

        let result = commonBatchDelAjax('/user/deletes', {ids: ids}, 'post');
        if (result.count > 0) {
            layerMsgDeleteSuccess();
            findAll();
        } else {
            layerMsgDeleteFail();
        }
    }

    /**
     * 修改
     * @param id
     */
    function updateUser(id) {
        sessionStorage.setItem("userId", id);
        commonLayerOpen('用户详情', 'userDetails.html');
    }

    /**
     * 查询
     */
    $('#query').on('click', function () {
        findAll()
    });

    /**
     *  分配角色
     */
    function distributionRole(id) {
        sessionStorage.setItem("userRoleId", id);
        layer.open({
            title: '分配角色',
            //调整弹窗大小
            area: ["400px", "300px"],
            //点击旁边地方自动关闭
            shadeClose: true,
            anim: 2,
            type: 2,
            content: 'userRole.html',
        });
    }

    /**
     * 启用与禁用
     * @param type
     * @param id
     */
    function dataEnable(type, id) {
        let data = {
            id: id,
            dataEnable: type
        };
        let result = commonAjax('/user/update', JSON.stringify(data), 'post');
        if (result.count === 1) {
            layerMsgOperatingSuccess();
        } else {
            layerMsgOperatingFail();
        }
        findAll();
    }


    /**
     * 查询所有角色
     */
    function findAllRole() {
        let data= {
            pageNum:1,
            pageSize:50
        };
        let result = commonAjax('/role/findAll',data,'get');
        let html = '<option value="">全部</option>';
        for (let i = 0; i < result.data.length; i++) {
            html += '<option value="' + result.data[i].id + '">' + result.data[i].roleName + '</option>';
        }
        $("#userRole").html(html);

    }

});